<%--
  Created by IntelliJ IDEA.
  User: Lenovo
  Date: 2023/7/11
  Time: 13:44
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<script src="${pageContext.request.contextPath}/static/js/jquery-3.6.0.js" charset="utf-8"></script>
<body>
<video id="video" width="100%" height="100px" autoplay></video>
<button id="captureButton">拍照</button>
<canvas id="canvas" style="display: none;"></canvas>
</body>
<script>
  /*  // 获取video和canvas元素
    var video = document.getElementById('video');
    var canvas = document.getElementById('canvas');
    var captureButton = document.getElementById('captureButton');

    // 检查浏览器是否支持媒体设备API
    if (navigator.mediaDevices && navigator.mediaDevices.getUserMedia) {
        // 请求访问摄像头
        navigator.mediaDevices.getUserMedia({ video: true })
            .then(function(stream) {
                // 将摄像头的视频流绑定到video元素上
                video.srcObject = stream;
            })
            .catch(function(error) {
                console.error('访问摄像头失败: ', error);
            });
    }

    // 拍照按钮点击事件处理函数
    captureButton.addEventListener('click', function() {
        // 将视频画面绘制到canvas上
        var context = canvas.getContext('2d');
        context.drawImage(video, 0, 0, canvas.width, canvas.height);

        // 将canvas中的图像转换为Blob对象
        canvas.toBlob(function(blob) {
            // 创建FormData对象并将照片数据添加到其中
            var formData = new FormData();
            formData.append('photo', blob, 'photo.jpg'); // 设置文件名为 'photo.jpg'

            // 创建XMLHttpRequest对象
            var xhr = new XMLHttpRequest();

            xhr.open('POST', '${pageContext.request.contextPath}/plateNumberScan', true);
            xhr.onload = function() {
                if (xhr.status === 200) {
                    console.log(xhr.responseText);
                } else {
                    console.error('照片上传失败');
                }
            };
            xhr.send(formData);

        }, 'image/jpeg');
    });*/

  var imagePath = '${pageContext.request.contextPath}/static/images/chepai.png';

  // 创建一个<img>元素并加载图片
  var img = new Image();
  img.onload = function() {
      // 将图片绘制到画布上
      var context = canvas.getContext('2d');
      context.drawImage(img, 0, 0, canvas.width, canvas.height);

      // 将画布中的图片转换为Blob对象
      canvas.toBlob(function(blob) {
          var formData = new FormData();
          formData.append('photo', blob, 'photo.jpg');

          var xhr = new XMLHttpRequest();
          xhr.open('POST', '${pageContext.request.contextPath}/plateNumberScan', true);
          xhr.onload = function() {
              if (xhr.status === 200) {


                  var encodedNumber = encodeURIComponent(xhr.responseText);
                  var decodedNumber = decodeURIComponent(encodedNumber);

                  console.log(decodedNumber);
              } else {
                  console.error('照片上传失败');
              }
          };
          xhr.send(formData)

      }, 'image/jpeg');
  };
  img.src = imagePath;
</script>
</html>
